/**
 * VUEshop
 * ============================================================================
 * * 版权所有 2015-2027 深圳搜豹网络科技有限公司，并保留所有权利。
 * 网站地址: http://www.vueshop.com.cn
 * ----------------------------------------------------------------------------
 * 这不是一个自由软件！您只能在不用于商业目的的前提下对程序代码进行修改和使用 .
 * 不允许对程序代码以任何形式任何目的的再发布。
 * ============================================================================
 * $Author: 沈小白 2020-07-22 $
 */<template> 
	<view class="container">
		<join-progress :stepInfo="step"></join-progress>
		<view class="pic-list pd-bg-fff">
			<view class="redword">需要上传在有效期内的营业执照，且为原件照片</view>
			<view class="share-pic">
				 <image class="wh100" :src="filePath?filePath:defaultPhoto" @tap="selectPhotos"></image>
				
			</view>
			<view class="bottomword">需上传原件照片</view>
		</view>
		<form @submit="submitInfo" class="formbox">
			<view class="item">
				<view class="item-name">长期有效</view>
				<switch @change="setLongValid" class="item-right" color="#ff3b3b" type="switch" role="checkbox" aria-disabled="false"
				 aria-checked="false"></switch>
			</view>
			<picker @change="bindStartDate" class="item" mode="date" aria-haspopup="true" v-if="!isLongValid">
				<view class="item-name">有效期开始时间:</view>
				<view class="item-input">{{params.business_date_start}}</view>
				<view class="item-right">
					请选择
					<image class="next_icon" :src="imgUrl+'common/xr_3.png'"  role="img"></image>
				</view>
			</picker>
			<picker @change="bindEndDate" class="item" mode="date" aria-haspopup="true" v-if="!isLongValid">
				<view class="item-name">有效期结束时间:</view>
				<view class="item-input">{{params.business_date_end}}</view>
				<view class="item-right">
					请选择
					<image class="next_icon" :src="imgUrl+'common/xr_3.png'"  role="img"></image>
				</view>
			</picker>
			<view class="item">
				<view class="item-name">营业执照号:</view>
				<input class="item-input" v-model="params.business_licence_number" name="business_licence_number" placeholder="请与营业执照上保持一致">
				
				</input>
				<view class="item-desc">请按照营业执照上的信息填写，仅支持数字、字母和汉字。如：410998000018866(1-1)，请输入：410998000018866</view>
			</view>
			<view class="item last">
				<view class="item-name">字号名称（法人）:</view>
				<input class="item-input" v-model="params.legal_person" name="legal_person" placeholder="请填写营业执照上的字号">
				
				</input>
				<view class="item-desc">如果个体户营业执照没有名称，名称中请填写营业者姓名。企业执照请填写法人代表、个体户执照请填写经营者姓名。</view>
			</view>
			<button class="next-btn" form-type="submit" role="button" aria-disabled="false">
				提 交

			</button>
		</form>
	</view>
</template>

<script>
	import joinProgress from "@/components/joinProgress/joinProgress.vue";
	import config from "@/api/config.js";
	import common from "@/common/common.js";
	import {putStoreApply} from "@/api/api.js"
	import {mapState} from "vuex";
	export default {
		data() {
			return {
				defaultPhoto:"common/camera.png",
				step:3,//步骤
				imgUrl:config.imgUrl,
				filePath:"",//图片路径
				isLongValid:false,//长期有效
				hostUrl:config.host,//路径前缀
				params:{
					business_licence_cert:"",//营业执照电子版 路径
					legal_person:"",//法人代表
					business_licence_number:"",//营业执照
					business_date_end:"",//营业执照有效期截至时间
					business_date_start:"",//营业执照有效期起始时间
				}
			};
		},
		components:{
			joinProgress
		},
		computed: {
			...mapState(['hasLogin'])
		},
		onShow(){
			if(this.hasLogin){
				// this.getStoreClass()
			}else{
				common.toast("none","请登录",2000)
				
			}
		},
		methods:{
			/*是否长期有效*/ 
			setLongValid(e){
				console.log(e)
				this.isLongValid=e.detail.value;
				
				if(this.isLongValid){
					let date = new Date();
					var day=date.getDate();
					var year=date.getFullYear();
					var month=date.getMonth()+1;
					console.log(year,+month,+day)
					this.params.business_date_start=year+"-"+month+"-"+day;
					console.log(this.params.business_date_start)
					this.params.business_date_end="长期"
				}else{
					// this.params.business_permanent=0;
				}
			},
			/*选择开始时间*/ 
			bindStartDate(e){
				console.log(e)
				this.params.business_date_start=e.detail.value
			},
			/*选择结束时间*/ 
			bindEndDate(e){
				this.params.business_date_end=e.detail.value
			},
			/*选择照片*/ 
			selectPhotos(e){
				var that =this;
				uni.chooseImage({
					count: 1, //最多1张图片,默认9
					sizeType: ['compressed', 'original'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['camera', 'album'], //可以指定来源是相册还是相机，默认二者都有
					success: function (res) {
						console.log(res)
						that.filePath=res.tempFilePaths[0]
						/*替换图片重绘*/
						that.$forceUpdate()
						uni.uploadFile({
							url:that.hostUrl + '/mall/upload',
							filePath: res.tempFilePaths[0],
							name: 'file',
							formData: {
								"type":"store/cert",
							},
							
							success: function (res) {
								console.log(JSON.parse(res.data).result)
								console.log(res)
								
								that.params.business_licence_cert=JSON.parse(res.data).result
								
								
								console.log(that.params.business_licence_cert)
							}
						});
					}
				});
			},
			/*更新店铺信息*/ 
			putStoreApply(params){
				putStoreApply(params).then(res=>{
					console.log(res)
					if(res.msg==1){
						common.toast("none","提交成功",3000)
						setTimeout(function(){
							uni.navigateTo({
								url:"/pages/newjoin/join4/join4"
							})
						},3000)
					}	
				})
			},
			/*提交*/ 
			submitInfo(){
				if(!this.params.business_licence_cert||!this.params.legal_person||!this.params.business_licence_number||!(this.isLongValid||(!this.isLongValid&&
				this.params.business_date_start&&this.params.business_date_end))){
					common.toast("none","请完善信息",2000)
					console.log(this.params)
				}
				console.log(this.params)
				this.putStoreApply(this.params)
			},
		}
	}
</script>

<style lang="scss">
page{
    color: #666;
}
.notice{
    padding: 10rpx 30rpx;
    font-size: 24rpx;
    background-color: #FDFBE4;
}
.pic-list{
    margin: 0 auto;
    padding:20rpx 30rpx 20rpx;
    margin-bottom: 20rpx;
    margin-top: 20rpx;
    width: 710rpx;
    border-radius: 10rpx;
    box-sizing: border-box;
}
.share-pic{
    width: 150rpx;
    height: 150rpx;
    border: 1px dashed #f3f3f3;
    overflow: hidden;
    margin: 0 auto;
}
.item{
    float: left;
    padding: 0 30rpx; 
    width: 100%;
    box-sizing: border-box;
    font-size: 26rpx;
    border-bottom: 1rpx solid #f3f3f3;
    line-height: 80rpx;
    position: relative;
    background-color: white;
}
.item-name{
    float: left;
}
.item-input{
    float: left;
    height: 80rpx;
    width: 450rpx;
    margin-left: 20rpx;
    word-break: keep-all;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.item-right{
    position: absolute;
    right: 30rpx;
}
.item-desc{
    display: inline-block;
    width: 100%;
    box-sizing:border-box;
    font-size: 24rpx;
    line-height: 28rpx;
    background-color: #EEF2F3;
    padding: 10rpx;
}
.arrow{
    width: 24rpx;
    height: 24rpx;
}
switch .wx-switch-input{
    height: 42rpx;
    border-radius: 4rpx;
}
switch .wx-switch-input::before,switch .wx-switch-input::after{
    height: 40rpx;
    border-radius: 4rpx;
}
.next-btn{
    float: left;
    background-color: #ff3b3b;
    color: white;
    border-radius: 10rpx;
    margin: 0 auto;
    margin-top: 20rpx;
    width: 710rpx;
    font-size: 36rpx;
    height: 90rpx;
    line-height: 90rpx;
}
.formbox{
  width: 710rpx;
  margin: 0 auto;
  box-sizing: border-box;
  overflow: hidden;
  border-radius: 10rpx;
}
.last{
  border-bottom-right-radius:10rpx;
  border-bottom-left-radius:10rpx;
}
.redword{
  color: #ff3b3b;
  font-size: 24rpx;
  margin: 10rpx 0 30rpx 10rpx;
}
.bottomword{
  text-align: center;
  font-size: 26rpx;
  margin: 20rpx auto; 
  color: #333;
}
.next_icon {
    width: 32rpx;
    height: 32rpx;
    float: right;
    margin-top: 24rpx;
}
</style>
